<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="单据编号:" style="width: 300px">
        <el-input
          v-model="formInline.billNo"
          placeholder="请输入"
          style="width: 220px"
        ></el-input>
      </el-form-item>

      <el-form-item label="单据日期:">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="请选择开始"
            v-model="formInline.date1"
            style="width: 150px"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="1" style="margin-left: 6px">~</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="请选择开始"
            v-model="formInline.date2"
            style="width: 150px"
          ></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item
        label="单据主题:"
        style="width: 290px; margin-left: 10px"
        v-if="shuxing"
      >
        <el-input
          v-model="formInline.province"
          placeholder="请输入"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item label="供应商:" v-if="shuxing">
        <el-select
          v-model="formInline.supplierId_dictText"
          style="width: 235px"
        >
        </el-select>
      </el-form-item>

      <el-form-item label="单据阶段:" v-if="shuxing" style="margin-left: 8px">
        <el-select v-model="formInline.billStage_dictText" style="width: 130px">
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="编译中" value="编译中"></el-option>
          <el-option label="编译完成" value="编译完成"></el-option>
          <el-option label="核批中" value="核批中"></el-option>
          <el-option label="核批撤销" value="核批撤销"></el-option>
          <el-option label="核批完" value="核批完"></el-option>
          <el-option label="执行中" value="执行中"></el-option>
          <el-option label="执行中止" value="执行中止"></el-option>
          <el-option label="执行完成" value="执行完成"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="已生效:" v-if="shuxing" style="margin-left: 3px">
        <el-select
          v-model="formInline.isEffective_dictText"
          style="width: 130px"
        >
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="已关闭:" v-if="shuxing" style="margin-left: 3px">
        <el-select v-model="formInline.isClosed_dictText" style="width: 130px">
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="已作废:" v-if="shuxing" style="margin-left: 4px">
        <el-select
          v-model="formInline.isVoided_dictText"
          placeholder="请选择"
          style="width: 130px"
        >
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="Userlist(1)"
          >查询</el-button
        >

        <el-button icon="el-icon-refresh-right">重置</el-button>
        <el-button type="primary" icon="el-icon-search" v-if="shuxing"
          >高级查询</el-button
        >

        <span
          class="el-icon-arrow-down"
          @click="kaikai"
          style="color: #1890ff"
          v-if="!shuxing"
          >展开</span
        >
        <span
          class="el-icon-arrow-up"
          @click="kaikai"
          style="color: #1890ff"
          v-if="shuxing"
          >收起</span
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column fixed="left" type="selection" width="55">
      </el-table-column>

      <el-table-column fixed="left" type="index" label="#" width="50">
      </el-table-column>

      <el-table-column
        fixed="left"
        sortable
        prop="billNo"
        label="单据编号"
        width="150"
      >
      </el-table-column>

      <el-table-column sortable prop="billDate" label="单据日期" width="120">
      </el-table-column>

      <el-table-column sortable prop="province" label="单据主题" width="120">
      </el-table-column>

      <el-table-column sortable prop="srcNo" label="源单号" width="120">
      </el-table-column>

      <el-table-column
        sortable
        prop="supplierId_dictText"
        label="供应商"
        width="300"
      >
      </el-table-column>

      <el-table-column
        sortable
        prop="sysOrgCode_dictText"
        label="业务部门"
        width="120"
      >
      </el-table-column>

      <el-table-column
        sortable
        prop="operator_dictText"
        label="业务员"
        width="120"
      >
      </el-table-column>

      <el-table-column prop="cost" label="入库金额" width="120">
      </el-table-column>

      <el-table-column prop="settleAmt" label="结算金额" width="120">
      </el-table-column>

      <el-table-column prop="settledAmt" label="已结算金额" width="120">
      </el-table-column>

      <el-table-column prop="invoicedAmt" label="已开票金额" width="120">
      </el-table-column>

      <el-table-column prop="invoiceType_dictText" label="发票类型" width="120">
      </el-table-column>

      <el-table-column sortable prop="zip" label="入库经办" width="120">
      </el-table-column>

      <el-table-column prop="billStage_dictText" label="单据阶段" width="120">
      </el-table-column>

      <el-table-column prop="isEffective_dictText" label="已生效" width="120">
      </el-table-column>

      <el-table-column prop="isClosed_dictText" label="已关闭" width="120">
      </el-table-column>

      <el-table-column prop="isVoided_dictText" label="	已作废" width="120">
      </el-table-column>

      <el-table-column prop="isAuto_dictText" label="自动单据" width="120">
      </el-table-column>

      <el-table-column prop="isRubric_dictText" label="红字单据" width="120">
      </el-table-column>

      <el-table-column prop="bz" label="备注" width="120"> </el-table-column>

      <el-table-column prop="effectiveTime" label="生效时间" width="120">
      </el-table-column>

      <el-table-column prop="approver_dictText" label="核批人" width="120">
      </el-table-column>

      <el-table-column prop="createTime" label="制单时间" width="120">
      </el-table-column>

      <el-table-column prop="createBy_dictText" label="制单人 " width="120">
      </el-table-column>

      <el-table-column prop="sysOrgCode_dictText" label="制单部门 " width="120">
      </el-table-column>

      <el-table-column prop="updateTime" label="修改时间 " width="120">
      </el-table-column>

      <el-table-column prop="updateBy_dictText" label="修改人 " width="120">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            @click="handleMoreClick(scope.row)"
            type="text"
            size="small"
            >更多</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->

    <div class="block">
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNo"
        :page-sizes="[10, 20, 30]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { getKcglList } from "@/api/kcgl";
export default {
  data() {
    return {
      shuxing: false,
      formInline: {
        Userlist: [],
        pageNo: 1,
        pageSize: 10,
      },
      total: "",
      tableData: [],
    };
  },
  mounted() {
    this.Userlist();
  },
  methods: {
    //获取
    async Userlist(e) {
      if (e == 1) {
        this.formInline.pageNo = 1;
      }
      let data = {
        Userlist: this.formInline.Userlist,
        pageNo: this.formInline.pageNo,
        pageSize: this.formInline.pageSize,
      };
      let res = await getKcglList(data);
      this.tableData = res.result.records;
      console.log(res);
      this.total = res.result.total;
    },
    //分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.formInline.pageNo = 1;
      this.Userlist();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.pageNo = val;
      this.Userlist();
      console.log(`当前页: ${val}`);
    },
    //展开
    kaikai() {
      this.shuxing = !this.shuxing;
    },
  },
};
</script>

<style>
</style>